<template>
    <div class="category_detail">
      <div class="el_new_header clearfix">
        <div class="el_header_weather_info clearfix">
          <div class="el_header_name">{{title}}</div>
          <div class="el_header_weather">
            <div class="el_temperature">
              <div class="el_temperature_num">
                {{temperature.temperature}}℃
              </div>
              <div class="el_temperature_word">
                {{temperature.description}}
              </div>
            </div>
          </div>
        </div>
        <div class="el_header_search_box clearfix">
          <el-input 
              v-model="input" 
              placeholder="搜索商家、商品"></el-input>
        </div>
        <div class="el_recommend_list">
          <router-link to="/" 
              v-for = 'x in recommendList' 
              :key="x.id">
            {{x.word}}
          </router-link>
        </div>
      </div>
      <swipe class="my-swipe">
        <swipe-item class="slide1" 
            v-for="x in categoryList" 
            :key="x.index">
          <router-link to="/">
            <div class="category_list" v-for="item in x">
              <img :src="'https://fuss10.elemecdn.com'+item.image_url"  
                   :alt="item.title">
              <p>{{item.title}}</p>
            </div>
          </router-link>
        </swipe-item>
      </swipe>
      <div class="el_main_content clearfix">
        <h3>推荐商家</h3>
        <div class="el_main_content_wrap clearfix" 
             v-for = 'x in shopList'>
          <div class="el_shop_icon">
            <img :src="'https://fuss10.elemecdn.com/' + x.image_path | convertImgPath " 
            :alt="x.name">
          </div>
          <div class="el_shop_intro">
            <div class="el_shop_name">{{x.name}}</div>
            <div class="el_rate">
              <span class="el_month_sell">
                月售{{x.recent_order_num}}单
              </span>
            </div>
            <div class="el_delivery">
              <span class="el_delivery_start">￥{{x.float_minimum_order_amount}}起送/配送费{{x.float_delivery_fee}}￥/{{x.average_cost}}</span>
              <span class="el_distance">{{x.distance | convertDistance }}/{{x.order_lead_time}}分钟</span>
            </div>
          </div>
        </div>
      </div>
    </div>
</template>
<style lang="sass">
  @import "../assets/stylesheets/category.scss";
</style>
<script>
  export default{
      data () {
          return {
              categoryList: [],
              title: '',
              temperature: {},
              shopList: [],
              input: '',
              recommendList: [],
          };
      },
      methods: {
          getCategory () {
              this.axios.get('/v2/index_entry?geohash=' + this.$route.params.shop_geo + '&group_type=1&flags[]=F')
              .then((res) => {
                  let categoryList1 = [];
                  let categoryList2 = [];
                  let len = res.data.length;
                  if (len > 8) {
                      for (let i = 0;i < 8;i++) {
                          categoryList1.push(res.data[i]);
                      }
                      for (let a = 8;a < len;a++) {
                          categoryList2.push(res.data[a]);
                      }
                      this.categoryList.push(categoryList1, categoryList2);
                  } else {
                      for (let i = 0;i < len;i++) {
                          categoryList1.push(res.data[i]);
                      }
                      this.categoryList.push(categoryList1);
                  }
              });
          },
          getShopPosition () {
              this.axios.get('/v2/pois/' + this.$route.params.shop_geo)
              .then((res) => {
                  this.title = res.data.address;
                  this.axios.get('/bgs/weather/current?latitude=' + res.data.latitude + '&longitude=' + res.data.longitude + '&offset=0&limit=20&extras[]=activities')
                  .then((res) => {
                      this.temperature = res.data;
                  });
                  this.axios.get('/shopping/v3/hot_search_words?latitude=' + res.data.latitude + '&longitude=' + res.data.longitude)
                  .then((res) => {
                      this.recommendList = res.data;
                  });
                  this.axios.get('/shopping/restaurants?latitude=' + res.data.latitude + '&longitude=' + res.data.longitude + '&offset=0&limit=20&extras[]=activities&terminal=h5')
                  .then((res) => {
                      this.shopList = res.data;
                  });
              });
          },
      },
      created () {
          this.getCategory();
          this.getShopPosition();
      },
      filters: {
          convertDistance (ele) {
              if (parseInt(ele, 10) < 1000) {
                  return parseInt(ele, 10) + 'm';
              } else {
                  return (parseInt(ele, 10) / 1000).toFixed(2) + 'Km';
              }
          },
          convertImgPath (ele) {
              let reg = /png$/;
              if (reg.test(ele)) {
                  return ele + '.png?imageMogr/format/webp/thumbnail/!120x120r/gravity/Center/crop/120x120/';
              } else {
                  return ele + '.jpeg?imageMogr/format/webp/thumbnail/!120x120r/gravity/Center/crop/120x120/';
              }
          },
      },
  };
</script>

